
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ux.amCharts Charts with uxChartPack 2.1</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../media2/uxvismode.js"></script>
    <script type="text/javascript" src="../media2/uxmedia.js"></script>
    <script type="text/javascript" src="../media2/uxflash.js"></script>
    <script type="text/javascript" src="uxchart.js"></script>
    <script type="text/javascript" src="uxamchart.js"></script>


    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script type="text/javascript">

Ext.lib.Ajax.forceActiveX = true;
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

     Ext.QuickTips.init();
     Ext.QuickTips.getQuickTip().interceptTitles = true;

     Ext.QuickTips.enable();

  var getTools = function(exportMethod){
      return [{id:'refresh', handler:function(e,t,p){
                 ((p.items ? p.items.first() : null) || p).refreshMedia();

              },qtip: {text:'Refresh the Chart'}  },

             {id:'print',
                handler:function(e,t,p){
                 ((p.items ? p.items.first() : null) || p).chart.print();},
                qtip: {text:'Print the Chart'}
              },

            //save as image support
            {id:'save',
             handler:function(e,t,p){

                ((p.items ? p.items.first() : null) || p).chart.exportImage();
              },
            qtip: {title:'Save Chart as Image',text:'This example requires a PHP-Server.'}
           }
        ];
    };

  //this is a Chart Context menu callback :
  //see amChart/amcolumn/amcolumn_settings.xml for more on this example.
  printChart = function(){
      Ext.Msg.show({
          title:'ContextMenu Handler',
          msg:'Print request was selected',
          buttons:Ext.Msg.OK});
  };

  chartPanel= new Ext.ux.Chart.amChart.Panel({

            height      : 300,
            width       : 450,
            //x           : 170,
            title       : 'ux.amChart.Panel:',
            collapsible : true,
            maximizable : true,

            tools       : getTools('amChart/amcolumn/export.php'),
            renderTo    : Ext.getBody(),
            constrainHeader : true,

                chartCfg   :{ id   : 'chartAM'
                              ,autoSize : true
                              ,params:{
                                  //wmode     : "transparent",
                                  flashVars :{
                                      preloader_color  : "#FFFFFF",
                                      path : 'amChart/amcolumn/'  //font & styles location
                                  }
                              }
                             }
                ,mediaMask : {msg:'Loading Chart Object'}
                ,loadMask  : {msg:'Gathering Chart Data'}
                ,autoMask  : false

                ,listeners :{
                          mediaload  : function(){
                               console.info('mediaLoaded');

                          },

                          error  : function(p, obj,err){
                             Ext.Msg.show({title:'amChart Error', msg: err, buttons:Ext.Msg.OK});
                          }
                          ,returndata : function(p, obj, data){
                             //console.info(unescape(data));
                          }
                          ,returnparam : function(p, obj, data){
                             //console.info(unescape(data));
                          }
                          ,returnsettings : function(p, obj, data){
                             //console.info('settings', unescape(data));
                          }
                          ,returnimagedata : function(p, obj, imgData){
                             //you could POST the imgData yourself !
                             //console.log('imgReturned');

                           }
                          ,chartload : function(p,obj){
                              console.info('chartLoaded');
                              p.setTitle(p.title.split(":")[0]+': Loaded.');
                              }
                          ,chartrender : function(p,obj){
                              p.setTitle(p.title.split(":")[0]+': Rendered.');
                              }

                   }
                ,id         : 'demoAM'
                ,chartURL   : 'amChart/amcolumn/amcolumn.swf'
                ,settingsURL: 'amChart/amcolumn/amcolumn_settings.xml'
                ,dataURL    : 'amChart/amcolumn/amcolumn_data.xml' //let the chartObj load it


  });


  chartPanel.show();

  //Nested Chart component
  stockWin = new Ext.ux.Chart.amStock.Window({

              height      : 400,
              width       : 650,
              title       : 'ux.amStock:',
              collapsible : true,
              maximizable : true,
              resizable   : true,

              hideMode    : 'nosize',
              shadow  : false,
              id         : 'demoStockWin',
              tools       : getTools('amChart/amstock/export_inline.php'), //to an iframe
              constrainHeader : true,

                  chartCfg   :{ id   : 'stockAM'
                            ,autoSize : true
                            ,height  : 350
                            ,width   : 600
                            ,params:{
                                //wmode     : "transparent",
                                flashVars :{
                                    preloader_color  : "#FFFFFF",
                                    path : 'amChart/amstock/'  //font & styles location
                                }
                            }
                   },


                  mediaMask : {msg:'Loading Chart Object'}
                  ,loadMask  : {msg:'Gathering Chart Data'}
                  ,autoMask  : true

                  ,listeners :{

                            error  : function(p, obj,err){
                               Ext.Msg.show({title:'amStock Error', msg: err, buttons:Ext.Msg.OK});
                            }
                            ,rolledover : function(p, obj, date, period){
                               //console.log('rolledover', date, period);
                            }
                            ,clickedon : function(p, obj, date, period){
                               //console.log('clickedon', date, period);
                            }
                            ,returndata : function(p, obj, data){
                               //console.info(unescape(data));
                            }
                            ,returnparam : function(p, obj, data){
                               //console.info(unescape(data));
                            }
                            ,returnsettings : function(p, obj, data){
                               //console.info('settings', unescape(data));
                            }
                            ,returnimagedata : function(p, obj, imgData){


                             }
                            ,chartload : function(p,obj){
                                p.setTitle(p.title.split(":")[0]+': Loaded.');
                             }

                     }

                  ,chartURL   : 'amChart/amstock/amstock.swf'
                  ,settingsURL: 'amChart/amstock/amstock_settings.xml'
                  ,dataURL    : 'amChart/amstock/data.csv' //let the chartObj load it



     });
     stockWin.show();

   /*
     Notes:  Flash Object cleanup is important to prevent leakage!

    */
  Ext.EventManager.on(window,   "beforeunload",  function(e){

       Ext.destroy( chartPanel, stockWin, Ext.QuickTips.getQuickTip(), Ext.getCmp('image_frame'));
       } ,window ,{single:true});

});

</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="aboutamCharts">
For more on amCharts visit <a href="http://www.amcharts.com/" target="_blank">amCharts.com</a>
</div>
</body>
</html>
